<template>
  
  <view class="login-container">
    <view class="navbar">
      
    </view>
    <view class="header">
      <view>
        <view class="app-name">小匠</view>
        <view class="app-desc">一站式工业设计任务交易平台</view>
      </view>
      <image class="header-icon" src="/static/header-icon.png" mode="aspectFit"></image>
    </view>
    <!-- 登录表单区域 -->
    <view class="login-form">
      <!-- 手机号输入 -->
      <view class="form-item">
        <text class="label">手机号</text>
        <input 
          class="input" 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号"
          maxlength="11"
        />
      </view>

      <!-- 密码输入 -->
      <view class="form-item">
        <text class="label">密码</text>
        <input 
          class="input" 
          type="password" 
          v-model="password" 
          placeholder="请输入密码"
        />
      </view>

<view class="form-actions">
  <view class="agreement">
    <checkbox-group @change="onAgreeChange">
      <checkbox value="1" color="#00bfa5"></checkbox>
    </checkbox-group>
    <view class="agreement-text">
      同意 <text style="color: #03BB8D;">《平台用户协议》</text>
    </view>
  </view>
  <view class="forgot-password" @click="handleForgotPassword()">忘记密码?</view>
</view>


      <!-- 登录按钮 -->
      <view 
        class="login-btn" 
        @click="handleLogin"
        :disabled="!agree || !phone || !password"
      >
        登录
      </view>
    </view>

    <!-- 注册入口 -->
    <view class="register-section">
      <text class="register-text">还没有账户? </text>
      <text class="register-link" @click="handleRegister()">去注册</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// import { showToast } from 'uniapp';

// 表单数据
const phone = ref('18788888888'); // 默认显示的手机号
const password = ref('');
const agree = ref(false)   // 直接用布尔值
// 监听复选框变化
const onAgreeChange = (e) => {
  agree.value = e.detail.value.length > 0
}

// 登录处理
const handleLogin = () => {
  // 简单验证
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    });
    return;
  }
  
  // if (password.value.length < 6) {
  //   uni.showToast({
  //     title: '密码长度不能少于6位',
  //     icon: 'none'
  //   });
  //   return;
  // }
  
  // 实际登录逻辑
  console.log('登录信息:', { phone: phone.value, password: password.value });
  // 这里可以添加调用登录接口的代码
  uni.showToast({
    title: '登录成功',
    icon: 'success'
  });
  uni.switchTab ({ url: '/pages/index/index' });
};

// 忘记密码
const handleForgotPassword = () => {
  console.log('跳转到忘记密码页面');
  uni.navigateTo({ url: '/pages/login/modify-password' });
};

// 去注册
const handleRegister = () => {
  console.log('跳转到注册页面');
  uni.navigateTo({ url: '/pages/login/register' });
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  padding: 60rpx 40rpx;
  min-height: 100vh;
  background-color: #f9f9f9;
  /* background: linear-gradient(to bottom, #e6f7ef, #ffffff); */
}
.navbar {
  /* 固定导航栏高度（根据设计稿调整，确保足够显示背景图） */
  height: 663px;
  width: 663px;
  left: -180px;
  /* top: -35px  0px; */
  transform: rotate(6deg);
  opacity: 0.7;
  overflow: hidden;
  position: absolute;
  /* 背景图核心设置 */
  /* background-image: url('/static/top-bg.png');*/ 
  background-repeat: no-repeat;
  background-position: center center; /* 先尝试居中显示 */
  /* 或根据需要固定尺寸 */
  /* background-size: 750rpx 160rpx; */ /* 假设设计稿宽度是750rpx */
  /* z-index: 10; */
   z-index: -1;
}
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 100rpx;
}

.app-name {
  font-size: 80rpx;
  font-weight: bold;
  color: #00bfa5;
  margin-bottom: 20rpx;
}

.app-desc {
  font-size: 32rpx;
  color: #00796b;
}

.header-icon {
  width: 200rpx;
  height: 200rpx;
  margin-left: 20rpx;
  /* margin-top: 50rpx; */
}

.login-form {
  width: 100%;
  margin-top: 100rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input {
  width: 100%;
  height: 90rpx;
  padding: 0 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  font-size: 32rpx;
  border: 1px solid #eee;
  box-sizing: border-box;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0 50rpx;
}

.agreement {
  display: flex;
  align-items: center;
}

.checkbox {
  transform: scale(0.8);
  margin-right: 10rpx;
}

.agreement-text {
  font-size: 28rpx;
  color: #666;
}

.forgot-password {
  font-size: 28rpx;
  color: #00bfa5;
}

.login-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #00bfa5;
  color: #fff;
  font-size: 36rpx;
  border-radius: 50rpx;
  margin: 0;
}

.login-btn:disabled {
  background-color: #a5d6c8;
  opacity: 0.8;
}

.register-section {
  display: flex;
  justify-content: center;
  margin-top: 80rpx;
}

.register-text {
  font-size: 28rpx;
  color: #666;
}

.register-link {
  font-size: 28rpx;
  color: #00bfa5;
  margin-left: 10rpx;
}
</style>
